<template>
     <div>
       <van-nav-bar
         class="van-nav-bar"
         left-text="返回"
         left-arrow
         @click-left="$router.back()"
       />
     <div class="personal">个人信息</div>
        <van-cell title="头像" is-link >  <van-image src="../assets/1.png"/></van-cell>
        <van-cell title="昵称" is-link :value="$store.state.phoneHide" @click="Name=true"></van-cell>
        <van-cell title="生日" is-link value="2000-1-1"></van-cell>
        <van-cell title="性别" is-link value="男"></van-cell>
        <van-cell title="手机" is-link :value="$store.state.phone"></van-cell>
        <van-cell title="学段" is-link value="四级"></van-cell>
        <van-cell title="个性签名" is-link  value="未设置"></van-cell>
        <!-- 显示层 -->
        <van-popup v-model="Name" position="bottom" :style="{ height: '100%' }" >
          <!-- 子组件 -->
          <update-name 
          :name="$store.state.phoneHide"
          @update-name="$store.state.phoneHide = $event"
          @close="Name=false"/>
        </van-popup>
    </div>
</template>
<script>
import UpdateName from "./components/update-name.vue";

export default {
  components: {
    UpdateName
  },
  data() {
    return {
      Name: false
    };
  },
  mounted() {}
  // methods:{
  //     Name(){
  //       this.Name=true
  //     }
  //   }
};
</script>
<style  scoped>
.personal {
  font-size: 1.75rem;
  font-weight: 600;
  margin: 1.55rem 0 1.25rem 2rem;
}
.van-cell {
  color: #222831;
  font-weight: 700;
  font-size: 0.98rem !important;
}
.van-popup {
  background-color: #f5f7f9;
}
</style>

